import React, { memo, useEffect, useState } from 'react';

const ShowName = memo(function ({ name }) {
  console.log('render..... memo');
  return <div>{name}</div>;
});

const MemoDemo = () => {
  const [name] = useState('zghangsann');
  const [index, setIndex] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setIndex(prev => prev + 1);
    }, 1000);
  }, []);

  return (
    <div>
      <h4>memo()的基本用法</h4>
      <p>将函数组件变为纯组件，将当前 props 和上一次的 props 进行浅层比较，如果相同就阻止组件重新渲染。</p>
      {index}
      <ShowName name={name} />
      <p>memo的第二个参数为自定义渲染逻辑函数 prevProps, nextProps 返回false需要重新渲染 返回true不需要重新渲染，memo其实还是浅层比较</p>
    </div>
  );
};

export default MemoDemo;
